
<div style="width:1200px; height:400px" id="jqxChart"></div>


<script type="text/javascript">
	$(document).ready(function () {
	var source =
	{
		datatype: "json",
		datafields: [
			{ name: 'OrderDate', type: 'date'},
			{ name: 'Quantity'},
			{ name: 'ProductName'}
		],
		url: "<?php echo base_url();?>/json/chart/chart1"
	};
	var dataAdapter = new $.jqx.dataAdapter(source,
	{
		autoBind: true,
		async: false,
		downloadComplete: function () { },
		loadComplete: function () { },
		loadError: function () { }
	});
	// prepare jqxChart settings
	var settings = {
		title: "Khảo sát theo ngày",
		showLegend: true,
		padding: { left: 5, top: 5, right: 5, bottom: 5 },
		titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
		source: dataAdapter,
		categoryAxis:
		{
			text: 'Category Axis',
			textRotationAngle: -45,
			dataField: 'OrderDate',
			formatFunction: function (value) {
				return $.jqx.dataFormat.formatdate(value, 'dd/MM/yyyy');
			},
			showTickMarks: true,
			tickMarksInterval: Math.round(dataAdapter.records.length / 10),
			tickMarksColor: '#888888',
			unitInterval: Math.round(dataAdapter.records.length / 20),
			showGridLines: true,
			gridLinesInterval: Math.round(dataAdapter.records.length / 5),
			gridLinesColor: '#888888',
			axisSize: 'auto'
		},
		colorScheme: 'scheme05',
		seriesGroups:
		[
			{
				type: 'line',
				valueAxis:
				{
					displayValueAxis: true,
					description: 'Số người đã khảo sát',
					//descriptionClass: 'css-class-name',
					axisSize: 'auto',
					tickMarksColor: '#888888',
					unitInterval: 20,
					minValue: 0,
					maxValue: 100
				},
				series: [
					{ dataField: 'Quantity', displayText: 'Số người đã khảo sát' }
				]
			}
		]
	};
	// setup the chart
	$('#jqxChart').jqxChart(settings);
	});
</script>